<template>
	<view class="page">
		<template v-if="isLogin">
			<view class="body">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				
				<template v-else>
					<view class="list-wrap">
						<template v-if="list.length>0"> 
							<navigator :url="'/package_project/jc_pro/groupWorkDetail/groupWorkDetail?id='+item.id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
								<image :src="web_host+item.bg_img" mode="widthFix" class="bg"></image>
								<view class="content">
									<view class="label">监测作业</view>
									<view class="icon"><image src="@/static/images/mayi.png" mode="widthFix" class="bg"></image></view>
									<view class="name">{{item.pro_info}}</view>
									<view class="area">{{item.address_tag}}</view>
									<view class="day">{{item.create_time}}</view>
								</view>								 
							</navigator>	
							<loading :loadingState="loadingState"></loading> 
						</template>
						<template v-else>
							<empty msg="暂无信息"></empty>
						</template>
					</view>
				
				</template>
			</view> 
			
			<view class="footer">
				<view class="fix-wrap bottom">
					<navigator url="/package_project/jc_pro/addWorkGroup/addWorkGroup" hover-class="none" class="form-lay-btn" >创建作业群</navigator>
				</view>
			</view> 
		</template>
	</view>
</template>

<script>
 
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	import {HTTP_REQUEST_URL} from '@/config.js'
	export default {
		name: 'name',
		data() {
			return { 
				isLogin: false, 
				userInfo: uni.getStorageSync('userInfo'), 
				loadingState:{
					default:true,
					loading:false,
					compelted:false
				}, 
				list:[],
				params:{
					page:1
				},
				web_host:HTTP_REQUEST_URL
			}


		},
		async onLoad() {			
			this.isLogin=await this.$loginState('check');  
			if(this.isLogin){
				this.getPros();
			}
		},
		async onShow() {

		},
		methods: {
			getPros:async function(){
				let res=await this.$api.pro_api.getCommonPros({
					pageNum: 0,
					page: this.params.page
				})  
				if(res.data.ret==0){
					this.loadingState.default=false;
					this.list=this.list.concat(res.data.data);
				}else{
					this.loadingState.default=false;
				}
			}
		},
		components: {
			loading,
			empty
		},

		computed: {
			list_update(){
				return this.$store.state.groupListUpdate;    // 评价列表更新
			}
		},
		watch: {
			list_update(newer,older){
				if(newer!=older){
					this.list=[];
					this.loadingState.default=true;
					this.loadingState.loading=false;
					this.loadingState.completed=false;
					this.getPros();
				}
			}
		}

	}
</script>

<style lang="less" scoped> 
	.list-wrap{
		display: flex; 
		flex-wrap: wrap;
		padding:10rpx 10rpx;
		.item{
			width: 47%; 
			margin:0 10rpx 20rpx;
			position: relative; 
			border-radius: 15rpx;
			overflow: hidden;
			.content{
				position: absolute;
				left:0;
				top:0;
				width: 100%;
				height: 100%;
			}
			.bg{  
				border-radius: 15rpx;
			}
			.label{
				width: 150rpx; 
				margin: 20rpx auto;
				background-color: #fff;
				border-radius: 60rpx;
				text-align: center; 
				color: #e61111;
				font-size: 28rpx;
			}
			.icon{
				width: 90rpx;
				height: 90rpx;
				margin:0 auto 10rpx;
				image{
					width: 100%;
				}
			}
			.name{
				font-weight: bold;
				font-size: 30rpx;
				margin: 10rpx 0 0x 0;
				padding: 0 20rpx;
				text-align: center;
				color:#fff;
			}
			.area{ 
				font-size: 30rpx;
				margin: 0 0 0 0;
				padding: 0 20rpx;
				text-align: center;
				color:#fff;
			}
			.day{ 
				font-size: 28rpx;  
				text-align: center;
				color:#fff;
			}
			 
		}
	}
	 
	
	
</style>
